<template>
	<view>

		<view class="task">
			<!-- <view class="task-tip">已完成今日巡检任务({{task.completed}}/{{task.totalTasks}})</view> -->
			<!-- 整个任务部分都在 task-header 中 -->
			<view class="task-header" @click="toggleTaskContent">
				<view class="task-name">
					<view style="width: 90%;">{{task.name}}</view>
					<uni-icons type="down" size="30" v-if="this.isTaskContentVisible === false" class="task-icon"
						@tap="()=>{this.isShow = true}"></uni-icons>
					<uni-icons type="up" size="30" v-else class="task-icon"
						@tap="()=>{this.isShow = false}"></uni-icons>
				</view>
				<!-- <uni-icons type="down" size="30" v-if="this.isShow === false" class="task-icon" @tap="()=>{this.isShow = true}"></uni-icons> -->
				<!-- 任务详细信息 -->
				<view class="task-details-wrapper" :class="{ 'expanded': isTaskContentVisible }">
					<view class="task-details">
						<view class="task-item">任务区域：{{task.mapName}}</view>
						<view class="task-item">
							<view>任务状态：</view>
							<view>
								<view style="color: #0A60BD;" v-if="task.status == 0">处理中</view>
								<view style="color: red;"  v-else-if="task.status == 1">已超时</view>
								<view style="color: #4CAF50;"  v-else-if="task.status == 2">已完成</view>
								<view style="color: grey;"  v-else-if="task.status == 3">已取消</view>
								<view style="color: grey;" v-else-if="task.status == 4">未开始</view>
								<view v-else>未知状态</view>
							</view>
						</view>
						<view class="task-item">任务进度：{{task.schedule}}</view>
						<view class="task-item">区&nbsp;&nbsp;&nbsp;域ID：{{task.mapId}}</view>
						<view class="task-item">开始时间：{{formatDate(task.startTime)}}</view>
						<view v-if="task.status == 2" class="task-item">完成时间：{{formatDate(task.finishTime)}}</view>
						<view class="task-item">限时完成时间：{{task.limitTime}}小时</view>
					</view>
				</view>
			</view>
			<view class="task-body">
				<view v-for="(inspectionData, index) in inspectionDatas" :key="index" class="task-content">
					<view class="task-left">
						<view class="task-name">{{inspectionData.inspectionDataName}}</view>
						<view class="task-item">检查项目：{{inspectionData.inspectionDataDesc}}</view>
						<view class="task-item">
							<view>任务状态：</view>
							<view>
								<view style="color: #0A60BD;"  v-if="inspectionData.inspectionDetailStatus === 0">处理中</view>
								<view style="color: red;"  v-else-if="inspectionData.inspectionDetailStatus === 1">已超时</view>
								<view style="color: #4CAF50;"  v-else-if="inspectionData.inspectionDetailStatus === 2">已完成</view>
								<view style="color: red;" v-else-if="inspectionData.inspectionDetailStatus === 4">有异常</view>
								<view style="color: grey;" v-else-if="inspectionData.inspectionDetailStatus === 6">未开始</view>
							</view>
						</view>
						<view class="task-item">任务机组：{{inspectionData.unitName}}</view>
						<view class="task-item">任务点位号：{{inspectionData.mapDetailId}}</view>
						<view class="task-item">任务点位描述：{{inspectionData.mapDetailDesc}}</view>
						<view class="task-item">任务负责人：{{inspectionData.inspectionDetailUser}}</view>
						<view class="task-item">任务是否作弊：
							<view v-if="inspectionData.inspectionDetailIscheat == 0">未作弊</view>
							<view v-else>已作弊</view>
						</view>
						<view v-if="inspectionData.inspectionDetailStatus === 2" class="task-item">
							任务完成时间：{{inspectionData.inspectionEndTime}}</view>
						<view class="task-item">任务评分：{{inspectionData.inspectionDetailScore}}</view>
					</view>
					<view class="task-right" @tap="goToTaskData(inspectionData)">详情></view>
				</view>
				<view class="tips">没有更多数据了</view>
			</view>
		</view>
	</view>
</template>

<script>
	import request from "../../../common/request.js"
	export default {
		data() {
			return {
				username: "苏建宁",
				isShow: false,
				task: {
					name: '',
					area: '',
					status: '',
					schedule: '',
					startTime: '',
					limitTime: '',
					completed: '',
					totalTasks: '',
					finishTime: '',
					mapId: '',
					mapName: '',
					inspectionWorkId: 1
				},
				isTaskContentVisible: false, // 控制任务信息显示的状态
				inspectionDatas: []
			}
		},
		onLoad(options) {
			// 解码传递过来的时间参数
			const startTime = decodeURIComponent(options.startTime);
			const finishTime = decodeURIComponent(options.finishTime);
			let userInfo = uni.getStorageSync('userInfo')
			this.username = userInfo.realName;
			this.userId = userInfo.userId;
			// 获取 URL 参数并赋值给 task 对象
			this.task.name = options.name || 'N/A';
			this.task.area = options.area || 'N/A';
			this.task.status = options.status || 'N/A';
			this.task.schedule = options.schedule || 'N/A';
			this.task.startTime = startTime || 'N/A';
			this.task.limitTime = options.limitTime || 'N/A';
			this.task.completed = options.completed || 'N/A';
			this.task.totalTasks = options.totalTasks || 'N/A';
			this.task.finishTime = finishTime || 'N/A';
			this.task.mapId = options.mapId || 'N/A';
			this.task.mapName = options.mapName || 'N/A';
			this.task.inspectionWorkId = options.inspectionWorkId || 'N/A';

			this.getInspectionDatas();
		},
		methods: {
			formatDate(dateString) {
				dateString = dateString.replace(" ", "+")
				const timestamp = Date.parse(dateString);
				
				if (isNaN(timestamp)) {
				  console.log("无效时间");
				  return "无效时间"
				} else {
				  const date = new Date(timestamp);
				  date.setMilliseconds(0);  // 精确到秒
				
				  // 获取年、月、日、时、分、秒
				  const offset = 8;
				  const year = date.getUTCFullYear();
				  const month = String(date.getUTCMonth() + 1).padStart(2, '0');  // 月份从0开始，所以加1
				  const day = String(date.getUTCDate()).padStart(2, '0');
				  const hours = String(date.getUTCHours()+offset).padStart(2, '0');
				  const minutes = String(date.getUTCMinutes()).padStart(2, '0');
				  const seconds = String(date.getUTCSeconds()).padStart(2, '0');
				
				  // 格式化为 `YYYY:MM:DD:HH:mm:ss`
				  const formattedDate = `${year}:${month}:${day} ${hours}:${minutes}:${seconds}`;
				  console.log(formattedDate);  // 输出：2024:10:12:14:00:01
				  return formattedDate
				}
			},
			toggleTaskContent() {
				this.isTaskContentVisible = !this.isTaskContentVisible;
			},
			goToTaskData(inspectionData) {
				console.log("进入TaskData")
				const inspectionValuesString = encodeURIComponent(JSON.stringify(inspectionData.inspectionValues));
				uni.navigateTo({
					url: `/pages/taskManage/taskData/taskData?inspectionDetailId=${inspectionData.inspectionDetailId}&inspectionDataName=${inspectionData.inspectionDataName}&inspectionDataDesc=${inspectionData.inspectionDataDesc}&inspectionDetailStatus=${inspectionData.inspectionDetailStatus}&unitName=${inspectionData.unitName}&mapName=${this.task.mapName}&inspectionDetailClass=${inspectionData.inspectionDetailClass}&mapDetailId=${inspectionData.mapDetailId}&mapDetailDesc=${inspectionData.mapDetailDesc}&inspectionDetailUser=${inspectionData.inspectionDetailUser}&inspectionGroupId=${inspectionData.inspectionGroupId}&inspectionDetailNote=${inspectionData.inspectionDetailNote}&inspectionDetailDatas=${inspectionValuesString}`
				})
			},
			getInspectionDatas() {
				console.log("获取开始时间")
				console.log(this.task.startTime)
				console.log(this.task.inspectionWorkId)
				console.log(this.userId)
				console.log("输出巡检任务数据")
				request(`/inspection/detail/${this.task.inspectionWorkId}/${this.userId}`).then(res => {
					console.log(res)

					this.inspectionDatas = res.data.data
					console.log(this.inspectionDatas)
				})
			}
		}
	}
</script>

<style scoped>
	.task-icon {
		align-self: center;
	}

	.task-header {
		display: flex;
		flex-direction: column;
		align-items: left;
		background-color: #fff;
		padding: 20px;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
		cursor: pointer;
		transition: all 0.5s ease;
		/* 修改为 0.5s，与内容展开速度一致 */
	}

	.task-details-wrapper {
		overflow: hidden;
		transition: max-height 0.5s ease;
		/* 修改为 0.5s，与标题速度一致 */
		max-height: 0;
		/* 初始状态下内容不可见 */
	}

	.task-details-wrapper.expanded {
		max-height: 500px;
		/* 根据内容调整 */
	}

	.task-details {
		margin-top: 20px;
		/* 保证内容与标题有些间距 */
		font-size: 18px;
	}

	.task-item {
		margin-bottom: 10px;
		display: flex;
	}

	.task-tip {
		padding: 20px;
	}

	.task-name {
		font-size: 25px;
		display: flex;
	}

	.task-body {}

	.task-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* 对齐任务内容的左右两侧 */
		padding: 20px;
		background-color: #fff;
		margin: 10px;
		border-radius: 20px;
		box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.15);
	}

	.task-left {
		flex: 1;
		/* 左侧部分占据剩余空间 */
	}

	.task-right {
		font-size: 20px;
		color: #4CAF50;
	}

	.view-map-btn {
		background-color: #4CAF50;
		color: white;
		padding: 10px 20px;
		text-align: center;
		border-radius: 5px;
		margin-top: 10px;
		cursor: pointer;
		transition: background-color 0.3s ease;
	}

	.view-map-btn:hover {
		background-color: #45a049;
	}

	.tips {
		text-align: center;
	}
</style>